<script>
export default {
    name: "Reply"
}
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Goods_Reply, Goods_Manage, Goods_Category } from "@/api";
import UploadPhoto from '@/components/UploadPhoto.vue';
import { useRoute } from 'vue-router';

// 获取当前页面的路由信息
let route = useRoute();


let searchForm = reactive({
    data: '',
    is_reply: '',
    store_name: '',
    account: '',
})

// 根据路由信息是否携带id，进行操作
//加载评论列表
let replyData = ref([])
let reply_list = async () => {
    let { product_id } = route.query;
    if (product_id) {
        let { status, data } = await Goods_Reply.reply_list({ product_id });
        if (status === 200) {
            total.value = data.count;
            replyData.value = data.list;
        }
    } else {
        let { status, data } = await Goods_Reply.reply_list();
        if (status === 200) {
            total.value = data.count;
            replyData.value = data.list;
        }
    }
}

// 筛选
let selectedDate = ref([])
let handleDateChange = async (date) => {
    let { status, msg, data } = await Goods_Reply.reply_list({ data: date });
    if (status === 200) {
        selectedDate.value = [];
        replyData.value = data.list;
        total.value = data.count;
    }
}
let handleStringDate = async (value) => {
    if (value) {
        searchForm.data = value.join('-');
        let { status, msg, data } = await Goods_Reply.reply_list({ data: searchForm.data });
        if (status === 200) {
            replyData.value = data.list;
            total.value = data.count;
        }
    }
}
let handleReplyChange = async (reply) => {
    let { status, msg, data } = await Goods_Reply.reply_list({ is_reply: reply });
    if (status === 200) {
        replyData.value = data.list;
        total.value = data.count;
    }
}
let handleSearchReply = async () => {
    let { status, msg, data } = await Goods_Reply.reply_list(searchForm);
    if (status === 200) {
        replyData.value = data.list;
        total.value = data.count;
    }
}

// 添加自评
let add_reply_visible = ref(false)
let replyForm = reactive({
    image: '',
    avatar: '',
    nickname: '',
    comment: '',
    product_score: 0,
    service_score: 0,
    pics: '',
    add_time: '',
})
let avatar_show = ref(false)
let pics_show = ref(false)
let reply_ref = ref(null)
let handleAddReplyClose = () => {
    reply_ref.value.resetFields();
}
let handleAddReply = async () => {
    let { status, msg } = await Goods_Reply.add_fictitious_reply(replyForm);
    if (status === 200) {
        ElMessage.success(msg);
        add_reply_visible.value = false;
        reply_list();
    }
}

// 选择商品列表
let product_list_visible = ref(false)
let searchProduct = reactive({
    cate_id: '',
    store_name: '',
})
let cate_options = ref([])
let goodsData = ref([])
let handleProductList = async () => {
    let { status: cateStatus, data: cateDate } = await Goods_Category.tree_list(1);
    if (cateStatus === 200) {
        cate_options.value = cateDate;
    }
    let { status, msg, data } = await Goods_Manage.product_list({ page: 1, limit: 15 });
    if (status === 200) {
        goodsData.value = data.list;
    }
    product_list_visible.value = true;
}
let handleSelectedGood = (good) => {
    replyForm.image = good.image;
    replyForm.product_id = good.id;
    product_list_visible.value = false;
}

// 页码
let currentPage = ref(1)
let pageSize = ref(20)
let total = ref(0)

// 回复评论
let reply_comments_visible = ref(false)
let commentForm = reactive({
    content: "",
})
let selectedGood = ref([])
let ref_comment = ref(null)
let replyRules = reactive({
    content: [
        { required: true, message: '请输入回复内容', trigger: 'blur' },
    ],
})
let handleReplyComment = (good) => {
    selectedGood.value = good;
    reply_comments_visible.value = true;
}
let handleReplyClose = () => {
    ref_comment.value.resetFields();
}
let handleSubReply = () => {
    ref_comment.value.validate(async (valid) => {
        if (valid) {
            let id = selectedGood.value.id;
            let { status, msg } = await Goods_Reply.reply_comment(id, commentForm);
            if (status === 200) {
                ElMessage.success(msg);
                selectedGood.value.merchant_reply_content = commentForm.content;
                reply_comments_visible.value = false;
            }
        }
    })
}
let handleRemoveReply = (id) => {
    ElMessageBox.confirm(
        '确定要删除该评论？',
        '删除评论',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            let { status, msg } = await Goods_Reply.del_comment(id);
            if (status === 200) {
                ElMessage.success(msg);
                reply_list();
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除操作',
            })
        })
}

onMounted(() => {
    reply_list();
})
</script>

<template>
    <el-card shadow="never" style="margin-bottom:20px;"> 商品评论管理 </el-card>
    <el-card shadow="never">
        <el-form :model="searchForm" label-width="120px">
            <el-form-item label="评论时间：">
                <el-radio-group v-model="searchForm.data" @change="handleDateChange">
                    <el-radio-button label="">全部</el-radio-button>
                    <el-radio-button label="today">今天</el-radio-button>
                    <el-radio-button label="yesterday">昨天</el-radio-button>
                    <el-radio-button label="lately7">最近7天</el-radio-button>
                    <el-radio-button label="lately30">最近30天</el-radio-button>
                    <el-radio-button label="month">本月</el-radio-button>
                    <el-radio-button label="year">本年</el-radio-button>
                    <el-date-picker type="daterange" v-model="selectedDate" range-separator="-"
                        start-placeholder="Start date" size="default" end-placeholder="End date" format="YYYY/MM/DD"
                        value-format="YYYY/MM/DD" style="margin-left:20px;" @change="handleStringDate" />
                </el-radio-group>
            </el-form-item>
            <div class="search-rule">
                <el-form-item label="评价状态：">
                    <el-select v-model="searchForm.is_reply" clearable placeholder="请选择" @change="handleReplyChange">
                        <el-option label="已回复" :value="1" />
                        <el-option label="未回复" :value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品信息：">
                    <el-input v-model="searchForm.store_name" clearable placeholder="请输入商品ID或者商品信息" style="width:300px;" />
                </el-form-item>
                <el-form-item label="用户名称：">
                    <el-input v-model="searchForm.account" clearable placeholder="请输入" style="width:300px;" />
                </el-form-item>
                <el-button type="primary" icon="Search" @click="handleSearchReply">搜索</el-button>
            </div>
        </el-form>
        <el-button type="primary" icon="Plus" @click="add_reply_visible = true">添加虚拟评论</el-button>
        <el-table :data="replyData" style="margin-top:20px;"
            :header-cell-style="{ background: '#f4f3f9', color: '#606266' }" :row-style="{ height: '80px' }">
            <el-table-column prop="id" label="评论ID" />
            <el-table-column label="商品信息" width="300px;">
                <template #default="scope">
                    <div class="goods-info">
                        <div>
                            <el-image :src="scope.row.image" fit="fill" style="width:40px" />
                        </div>
                        <div>{{ scope.row.store_name }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="用户名称" />
            <el-table-column prop="score" label="评分" />
            <el-table-column label="评价内容">
                <template #default="scope">
                    <div>{{ scope.row.comment }}</div>
                    <el-image v-for="item in scope.row.pics" :src="item" fit="fill" style="width:40px" />
                </template>
            </el-table-column>
            <el-table-column prop="merchant_reply_content" label="回复内容" />
            <el-table-column prop="create_time" label="评价时间" width="300px;" />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleReplyComment(scope.row)">回复</el-button>
                    <el-divider direction="vertical" />
                    <el-button link type="primary" size="small" @click="handleRemoveReply(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" background
                layout="total, prev, pager, next, jumper" :total="total" />
        </div>
    </el-card>

    <!-- 添加自评 -->
    <el-dialog v-model="add_reply_visible" title="添加虚拟评论" @close="handleAddReplyClose">
        <el-form ref="reply_ref" :model="replyForm" label-width="120px">
            <el-form-item label="商品" prop="image">
                <el-upload class="avatar-uploader" @click="handleProductList" disabled :show-file-list="false">
                    <img v-if="replyForm.image" :src="replyForm.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户头像" prop="avatar">
                <el-upload class="avatar-uploader" @click="avatar_show = true" disabled :show-file-list="false">
                    <img v-if="replyForm.avatar" :src="replyForm.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <UploadPhoto v-model="replyForm.avatar" :is_show="avatar_show" @change="avatar_show = false"></UploadPhoto>
            <el-form-item label="用户名称" prop="nickname">
                <el-input v-model="replyForm.nickname" placeholder="请输入用户名称" />
            </el-form-item>
            <el-form-item label="评价文字" prop="comment">
                <el-input v-model="replyForm.comment" type="textarea" placeholder="请输入评价文字" />
            </el-form-item>
            <el-form-item label="商品分数" prop="product_score">
                <el-rate v-model="replyForm.product_score" />
            </el-form-item>
            <el-form-item label="服务分数" prop="service_score">
                <el-rate v-model="replyForm.service_score" />
            </el-form-item>
            <el-form-item label="评价图片" prop="pics">
                <el-upload class="avatar-uploader" @click="pics_show = true" disabled :show-file-list="false">
                    <img v-if="replyForm.pics" :src="replyForm.pics" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <UploadPhoto v-model="replyForm.pics" :is_show="pics_show" @change="pics_show = false"></UploadPhoto>
            <el-form-item label="评价时间" prop="add_time">
                <el-date-picker v-model="replyForm.add_time" type="datetime" placeholder="Select date and time" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handleAddReply" style="width: 100%;">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 选择商品列表 -->
    <el-dialog v-model="product_list_visible" title="请选择商品分类" width="60%">
        <el-form :model="searchProduct" label-width="100px">
            <div style="display: flex;justify-content: space-between;">
                <el-form-item label="商品分类：">
                    <el-select v-model="searchProduct.cate_id" clearable placeholder="请选择">
                        <el-option v-for="item in cate_options" :key="item.id" :label="item.html + item.cate_name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商品搜索：">
                    <el-input v-model="searchProduct.store_name" placeholder="请输入商品名称/关键字/编号" style="width:250px;">
                        <template #append>
                            <el-button icon="Search" />
                        </template>
                    </el-input>
                </el-form-item>
            </div>
            <el-table :data="goodsData" style="width: 100%">
                <el-table-column prop="date" label="#">
                    <template #default="scope">
                        <div class="selected-good" @click="handleSelectedGood(scope.row)"></div>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="商品ID" />
                <el-table-column prop="image" label="图片">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.image" fit="fill" />
                    </template>
                </el-table-column>
                <el-table-column prop="store_name" label="商品名称" width="300px" />
                <el-table-column prop="cate_name" label="商品分类" width="300px" />
            </el-table>
        </el-form>
    </el-dialog>

    <!-- 回复评论 -->
    <el-dialog v-model="reply_comments_visible" title="回复内容" @close="handleReplyClose">
        <el-form ref="ref_comment" :model="commentForm" :rules="replyRules" status-icon>
            <el-form-item prop="content">
                <el-input v-model="commentForm.content" :autosize="{ minRows: 3, maxRows: 6 }" type="textarea"
                    placeholder="请输入回复内容" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="reply_comments_visible = false">取消</el-button>
                <el-button type="primary" @click="handleSubReply">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="less" scoped>
.el-form {
    .search-rule {
        display: flex;
        justify-content: space-between;
    }
}

.avatar-uploader .avatar {
    width: 78px;
    height: 78px;
    display: block;
}

.selected-good {
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 15px;
    height: 15px;
}

.goods-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.page {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    text-align: center;
}
</style>